<template>
  <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" title="标题" width="600px">
    <div class="rule-form-contain">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        size="small"
        label-width="95px"
      >
        <el-form-item label="疑点标题" prop="field01">
          <el-input v-model="ruleForm.field01" clearable placeholder="">
          </el-input>
        </el-form-item>
        <el-form-item label="所属项目" prop="field02">
          <el-select v-model="ruleForm.field02" placeholder="请选择" clearable size="small" style="width:100%">
            <el-option :value="1" label="高管" />
            <el-option :value="2" label="中层" />
            <el-option :value="3" label="基层" />
            <el-option :value="4" label="其它" />
          </el-select>
        </el-form-item>

        <el-form-item label="审计单位" prop="field03">
          <el-select v-model="ruleForm.field03" placeholder="请选择" clearable size="small" style="width:100%">
            <el-option :value="1" label="高管" />
            <el-option :value="2" label="中层" />
            <el-option :value="3" label="基层" />
            <el-option :value="4" label="其它" />
          </el-select>
        </el-form-item>
        <el-form-item label="疑点描述" prop="field04">
          <el-input v-model="ruleForm.field04" type="textarea" rows="4">
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button :loading="loading" size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button :loading="loading" size="small" type="primary" @click="validateSubmit(ruleForm)">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
// 模拟添加接口
import { add } from '@/mock/index'
export default {
  name: 'DemoDialogForm',
  props: {
    // 是否显示
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      loading: false,
      // 表单
      ruleForm: {
      },
      // 验证
      rules: {
        // 疑点标题
        field01: [
          {
            // 必填
            required: true,
            message: '请输入',
            trigger: 'blur'
          }
        ],
        // 所属项目
        field02: [
          {
            // 必择
            required: true,
            message: '请选择',
            trigger: 'change'
          }
        ],
        // 审计单位
        field03: [
          {
            // 必择
            required: true,
            message: '请选择',
            trigger: 'change'
          }
        ],
        // 疑点描述
        field04: [
          {
            // 不超过150个字符
            max: 150,
            message: '请输入不超过150个字符',
            trigger: 'change'
          }
        ]
      }
    }
  },
  computed: {
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (newValue) {
        this.$emit('update:visible', newValue)
      }
    }
  },
  methods: {
    // 验证
    validateSubmit (ruleForm) {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          this.submit(ruleForm)
        } else {
          return false
        }
      })
    },
    // 提交表单
    async submit (ruleForm) {
      this.loading = true
      // 增加
      const res = await add(ruleForm)
      if (res.code === '0000') {
        this.$message({
          message: res.message,
          type: 'success'
        })
        // this.jumpRouterView(this.$route, { path: '/user' })
        this.dialogVisible = false
      }
      this.loading = false
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.rule-form-contain {
  padding: 15px 20px 0 0;
  >>> .el-form {
    .el-form-item:last-child {
      margin-bottom: 0px !important;
    }
  }
}
</style>
